import React, { useState, useEffect, useRef } from 'react'
import { ImagePreview } from 'react-vant'
import { EyeO, ChatO, GoodJobO, PhotoO } from '@react-vant/icons'
import { durationTrans, getGMT, toNums } from '@/util/Date.js'
import Topic from '@/components/Topic'
import RecommendActive from '@/components/RecommendActive'
import upmaster from '@/assets/images/upmaster.png'
import official from '@/assets/images/official.png'
import df from '@/assets/images/guanfang.png'
import './index.less'

const Index = props => {
  const imgbox = useRef(null)

  const cardImg = (item,event) => {
    event.stopPropagation()
    ImagePreview.open({
      images: item,
      closeable: true,
      teleport: imgbox.current,
    })
  }

  const toDetalis = (id) => {
    console.log(id.post.post_id)
  }

  const createCard = (item, idx) => {
    return (
      <div onClick={() => toDetalis(item)} key={idx} className="mhy-card mhy-article-card">
        <div className="account">
          <img className="mhy-account-avatar" src={item.user.avatar_url} />
          <div className="account-info">
            <p className="account-name">
              {item.user.nickname}
              <img
                src={`https://img-static.mihoyo.com/level/level${item.user.level_exp.level}.png`}
                className="mhy-img-icon"
              />
            </p>
            <p>
              {getGMT(item.post.created_at)} •{' '}
              {item.forum && item.forum.name ? item.forum.name : ''}
              <span> · 原神</span>
            </p>
          </div>
          <div className="authentication-mark">
            <span className="mhy-authentication-mark">
              {item.user.certification.type == 0 ? null : item.user
                  .certification.type == 1 ? (
                <img
                  className="mhy-img-icon mhy-symbol-icon"
                  src={official}
                  alt=""
                />
              ) : item.user.certification.type == 2 ? (
                <img
                  className="mhy-img-icon mhy-symbol-icon"
                  src={upmaster}
                  alt=""
                />
              ) : null}
            </span>
          </div>
        </div>
        <div className="article-title">
          <div className="mhy-article-type rv-multi-ellipsis--l2">
            {item.forum && item.forum.name == '官方' ? (
              <img className="mhy-img-icon article-type" src={df} />
            ) : null}
            <span>{item.post.subject}</span>
          </div>
        </div>
        <div className="article-content rv-multi-ellipsis--l3">
          {item.post.content}
        </div>
        {item.vod_list.length > 0 ? (
          <div className="vod-container">
            <div
              style={{
                backgroundImage: `url(${item.cover.url})`,
              }}
              className="vod-cover"
            >
              <div className="vod-play"></div>
              <div className="vod-duration">
                {durationTrans(item.vod_list[0].duration)}
              </div>
            </div>
          </div>
        ) : item.cover == null ? (
          <div className="cover-container">
            {item.post.images.slice(0, 3).map((ele, idx) => {
              return (
                <div
                  onClick={(e) => cardImg(item.post.images,e)}
                  className={[
                    'img-container ',
                    item.image_list.length <= 1 ? 'single-img' : null,
                  ].join('')}
                  key={idx}
                  style={{ backgroundImage: `url(${ele})` }}
                >
                  <img className="img-preview" src={ele} />
                </div>
              )
            })}
            <span className="mhy-all-pictures">
              {item.image_list.length > 3 ? (
                <>
                  <PhotoO />
                  <span>+{item.image_list.length}</span>
                </>
              ) : null}
            </span>
          </div>
        ) : (
          <div className="post-cover-container">
            <div
              style={{
                backgroundImage: `url(${item.post.cover})`,
              }}
              className="post-cover horizontal"
              onClick={() => cardImg(item.post.images)}
            >
              <span className="mhy-all-pictures">
                {item.image_list.length > 3 ? (
                  <>
                    <PhotoO />
                    <span>+{item.image_list.length}</span>
                  </>
                ) : null}
              </span>
            </div>
          </div>
        )}
        {item.topics.length > 0 ? (
          <div className="mhy-topic-babel-selector card-topic-selector">
            {item.topics.map((ele, idx) => {
              return (
                <div key={idx} className="label-item">
                  <span>{ele.name}</span>
                </div>
              )
            })}
          </div>
        ) : null}
        <div className="article-footer">
          <div className="num-count">
            <div className="num-count-item">
              <i className="mhy-icon iconfont icon-liulanshu">
                <EyeO />
              </i>
              <span>{toNums(item.stat.view_num)}</span>
            </div>
            <div className="num-count-item">
              <i className="mhy-icon iconfont icon-liulanshu">
                <ChatO />
              </i>
              <span>{toNums(item.stat.reply_num)}</span>
            </div>
            <div className="num-count-item">
              <i className="mhy-icon iconfont icon-liulanshu">
                <GoodJobO />
              </i>
              <span>{toNums(item.stat.like_num)}</span>
            </div>
          </div>
        </div>
      </div>
    )
  }

  return (
    <>
      {props.list.map((item, idx) => {
        return idx == 1 ? (
          <Topic key={idx} />
        ) : idx == 3 ? (
          <RecommendActive key={idx} />
        ) : (
          createCard(item, idx)
        )
      })}
      <div ref={imgbox}></div>
    </>
  )
}

export default Index
